<template>
    <div class="g-emall_wrap white">
	    <div class="g-emall_topbar">
            <div class="download_app" :class="['downloadTop',{'download_app_state': isCloseDown === true}]">
			<div class="mask"></div>
			<div class="download_tips">
				<div class="close" @click="closeDown"></div>
				<div class="tips">
					<p>壹键哥APP</p>
					<span>一个让你享受吃喝玩乐还能赚钱的APP</span>
				</div>
				<button class="download" @click="openGft">立即下载</button>
                 <open-app ref="openApp"></open-app>
			</div>
		</div>

	    </div>
	    <div class="pay-visitor">
	      <div class="vis-top">
	        <p class="vis-img"><img :src="logo|imgDomain"></p>
	        <p class="vis-title">付款给门店<span> {{salesOutletInfo.salesOutletName}}</span></p>
	      </div>
	      <div class="vis-info">
	        <p class="input"><span class="name">消费总额</span><input type="number" placeholder="询问商家后输入" name="amount" v-model="amount" ></p>
	        <p class="input"><span class="name">不参与优惠金额</span><input type="number" placeholder="询问商家后输入" name="discountAmount" v-model="discountAmount"  @change="format"></p>
	        <p class="click"> <button :class="{ success: isShow }" v-if="amount > 0" @click="prePay" >确认付款</button> <button v-else>确认付款</button></p>
	        <p class="msg">钱将实时付到对方账户，无法退款</p>
	      </div>
	      <div class="visc2-bottom">
	        <span @click="register">便捷注册再支付</span>
	        <span @click="login">已有账号，登录支付</span>
	      </div>

	    </div>
	    
	    <div :class="['pay-bg',{'display-none': isShowBlock === false}]"></div>
	    <div :class="['pay-bottom',{'display-none': isShowBlock === false}]" >
	      <p class="title"><span @click="prePay"></span><i></i>确认付款</p>
	      <p class="pricev">¥ {{actulAmount|toFixedFun}}</p>
	      <div class="text">
	        <p>商品<span>{{businessCategoryName}}-快捷支付</span></p>
	        <p>订单金额<span>{{amount|toFixedFun}}</span></p>
	        <p>商家优惠（{{storeVoucher.text}}）<span class="red">- {{storeVoucher.discountAmount}}</span></p>
	        <p class="pay" @click="selectPayWay">支付方式<span>{{paymentName}}<i></i></span></p>
	      </div>
          <button v-if="isClickPay" >立即付款</button>
	      <button @click="toPay" v-else>立即付款</button>
	    </div>
	    
	    <!--选择支付方式-->
	    <div :class="['pay-bottom','pay-list',{'display-none': isShowPayWay === false}] " v-if="paymentList.length>0">
	      <p class="title"><span  @click="selectPayWay"></span>选择支付方式</p>
	      <div class="text">
              <!-- <span class="icon-a"></span> -->
	        <p v-for="(payment,key) in paymentList" :key="key" v-bind="{paymenttype: payment.paymentType, paymentmethod: payment.paymentMethod}"  @click="getPayMethod($event)" ref='pay'><span :class="payment.icon"></span>{{payment.name}}</p>
	      </div>
	      <button v-if="isClickPay" >立即付款</button>
	      <button @click="toPay" v-else>立即付款</button>
	    </div>
        <msg-box ref="msgBox"></msg-box>
  </div>
</template>
<script>
import Vue from "vue";
import decimal from '../tools/decimal';
import msgBox from './MsgBox';
import openApp from './OpenApp'
export default {
    data () {
        return {
            salesOutletInfo: { salesOutletName: '', storeUID: '', salesOutletUID: '' }, //店铺信息
            logo: '',
            gw: '',
            businessCategoryName: '', //门店经营类目
            amount: null, // 应付价格
            isCloseDown: false,
            discountAmount: null, // 折扣价格
            queryString: '',
            isShowBlock: false,
            isShowPayWay: false,
            paymentList: [],//支付方式
            storeVoucher: {}, //商家优惠信息
            discountType: 0, //优惠类型
            paymentInfo: {}, //支付方式
            promotionData: {},
            requestParam: {},
            merchantType: 1, //渠道
            clientIP: "", // 搜狐IP
            isClickPay: false,
            orderId: '',
            isShow: false,
            paymentName: '', //支付方式
            actulAmount: null //实际付款金额

        }
    },
    created () {
        //获取是否开启游客支付
        this.queryString = this.$route.query
        this.$http.post('/api/getConfig', {}).then(res => {
            // res.body.isSuccess = 0 || false
            if (res.body.isSuccess === 1) {
                let configValue = res.body.resData.configValue || " "
                let configObj = JSON.parse(configValue) || {}
                if (parseInt(configObj.WhetherToOpen) === 1) {
                    //获取店铺信息
                    this.$http.post('/api/store', { gw: this.$route.query.gw, suid: this.$route.query.salesOutletUID }).then(res => {
                        if (res.body.error != "") {
                            this.disable = true;
                            this.alert(res.body.error);
                        } else {
                            this.gw = res.body.data.gw;
                            this.salesOutletInfo.salesOutletName = res.body.data.salesOutletName;
                            this.salesOutletInfo.storeUID = res.body.data.storeUID;
                            this.salesOutletInfo.salesOutletUID = this.$route.query.salesOutletUID;
                            this.logo = res.body.resData.logo;
                            this.discountType = res.body.resData.discountType
                            this.promotionData = res.body.resData
                            this.salesOutletInfo.publicKey = res.body.data.publicKey;
                            this.businessCategoryName = res.body.resData.businessCategoryName
                        }
                    }, res => {

                    })
                } else {
                    this.$router.push({ path: '/register', query: this.queryString })
                }
            } else {
                this.$router.push({ path: '/register', query: this.queryString })
            }
        })

    },
    mounted () {
        this.clientIP = returnCitySN.cip || '';
        this.getPaymentList();
    },
    watch: {
        amount (val) {
            //判断输入的是否是数字
            if (isNaN(parseFloat(val))) {
                this.amount = null
            } else {
                if (parseFloat(this.discountAmount) >= val) {
                    this.discountAmount = null
                }
                if (val.length > 16) {
                    this.amount = this.amount.slice(0, 16)
                }
                if (val > 0) {
                    this.isShow = true
                }
                //截取小数点
                if (String(val).indexOf('.') !== -1) {
                    let len = String(val).split('.')[1]
                    if (len.length > 2) {
                        this.amount = this.MathFloor(Number(val))
                    }
                }
            }
        },
        discountAmount (val) {
            //判断输入的是否是数字
            // if(isNaN(parseFloat(val)) && this.discountAmount <= this.amount) {
            if (isNaN(parseFloat(val))) {
                this.discountAmount = null
            } else {
                if (val.length > 16) {
                    this.discountAmount = this.discountAmount.slice(0, 16)
                }
                //截取小数点
                if (String(val).indexOf('.') !== -1) {
                    let len = String(val).split('.')[1]
                    if (len.length > 2) {
                        this.discountAmount = this.MathFloor(Number(val))
                    }
                }
                if (parseFloat(val) >= this.amount) {
                    this.discountAmount = this.discountType === 1 ? this.amount : 0
                }
            }

        }
    },
    components: {
        msgBox,
        openApp
    },
    filters: {
        // 商品价格保留两位小数点
        toFixedFun (val) {
            let price = Number(val).toFixed(2)
            return price
        }
    },
    methods: {
        closeDown () {
            this.isCloseDown = !this.isCloseDown
        },
        openGft () {
            this.$refs.openApp.openApp()
        },
        register () {
            this.$router.push({ path: '/register', query: this.queryString })
        },
        login () {
            this.$router.push({ path: '/login', query: this.salesOutletInfo })
        },
        formatPrice (value) {
            value = Number(value).toFixed(2)
            if (value === 0) {
                return 0.00
            } else if (value.split('.')[1].substring(1) === 0) {
                value = Number(value).toFixed(1)
            }
            let _val = value.split('.')
            return _val[0] + '.' + _val[1]
        },
        format () {
            this.amount = parseFloat(this.formatPrice(this.amount))
            this.discountAmount = parseFloat(this.formatPrice(this.discountAmount))

        },
        parseDom (e) {
            let div = document.createElement("div");
            if (typeof e === "string") {
                div.innerHTML = e;
            }
            return div.childNodes;
        },
        getPaymentList () {
            this.$http.post("/api/getPaymentList").then(res => {
                if (res.body.isSuccess != 1) return false;
                const data = res.body.resData.payTypes;
                if (data.length > 0) {
                    data.forEach((item, index) => {
                        if (item.name.indexOf("微信支付") >= 0) {
                            this.paymentList.push({
                                name: item.name,
                                paymentType: 6,
                                paymentMethod: 6
                            })
                            // Vue.set(this.paymentList, index, {
                            //   name: item.name,
                            //   paymentType: 6,
                            //   paymentMethod: 6
                            // });
                        } else if (item.name.indexOf("支付宝支付") >= 0) {
                            this.paymentList.push({
                                name: item.name,
                                paymentType: 5,
                                paymentMethod: 7
                            })
                        } else if (item.name.indexOf("云闪付") >= 0) {
                            this.paymentList.push({
                                name: item.name,
                                paymentType: 17,
                                paymentMethod: 17
                            })
                        }
                    })
                }
                // for (let i = 0; i < data.length; i++) {
                //     if (data[i].name.indexOf("微信支付") >= 0) {
                //         Vue.set(this.paymentList, i, {
                //             name: data[i].name,
                //             paymentType: 6,
                //             paymentMethod: 6
                //         });
                //     } else if (data[i].name.indexOf("支付宝支付") >= 0) {
                //         Vue.set(this.paymentList, i, {
                //             name: data[i].name,
                //             paymentType: 5,
                //             paymentMethod: 7
                //         });
                //     } else if (data[i].name.indexOf("云闪付") >= 0) {
                //         Vue.set(this.paymentList, i, {
                //             name: data[i].name,
                //             paymentType: 17,
                //             paymentMethod: 17
                //         });
                //     }
                // }

                if (this.paymentList.length > 0) {
                    this.paymentInfo.paymentType = this.paymentList[0].paymentType
                    this.paymentInfo.paymentMethod = this.paymentList[0].paymentMethod
                    this.paymentName = this.paymentList[0].name
                }
            });
        },
        //选择支付方式
        selectPayWay () {
            this.isShowPayWay = !this.isShowPayWay
        },
        //预支付 下单操作
        prePay () {
            this.isShowBlock = !this.isShowBlock
            if (this.isShowBlock === false) this.isShowPayWay = false
            //this.isShowPayWay = !this.isShowPayWay
            //计算满减金额
            this.countAmount()
        },
        alert (msg) {
            this.$refs.msgBox.alert(msg);
        },
        getPayMethod (el) {
            if (parseInt(el.currentTarget.getAttribute('paymenttype')) === 5) {
                this.paymentName = '支付宝支付'
                this.paymentInfo.paymentType = 5
                this.paymentInfo.paymentMethod = 7
            } else if (parseInt(el.currentTarget.getAttribute('paymenttype')) === 6) {
                this.paymentName = '微信支付'
                this.paymentInfo.paymentType = 6
                this.paymentInfo.paymentMethod = 6
            } else if (parseInt(el.currentTarget.getAttribute('paymenttype')) === 17) {
                this.paymentName = '云闪付'
                this.paymentInfo.paymentType = 17
                this.paymentInfo.paymentMethod = 17
            }
            this.isShowPayWay = !this.isShowPayWay
        },
        MathFloor (val) {
            let numberFloat = decimal.mul(val, 100)
            return decimal.div(Math.floor(numberFloat), 100)
        },
        countAmount () {
            this.discountAmount = isNaN(parseFloat(this.discountAmount)) ? 0 : parseFloat(this.discountAmount)
            let amount = decimal.sub(parseFloat(this.amount), parseFloat(this.discountAmount))
            let discountAmount = 0
            let quickPayInfo = this.promotionData || {}
            if (quickPayInfo.supportQuickPay == false) {
                this.alert('该商家不支持快捷支付');
                return false;
            }

            if (amount <= 0) {
                discountAmount = 0
            }
            // 优惠类型：1：无优惠；2：按比率优惠；3：满多少减多少（有上限）；4：满多少减多少（无上限）
            switch (this.discountType) {
                case 1:
                    this.storeVoucher.text = "无优惠"
                    discountAmount = 0
                    this.discountAmount = this.amount
                    break;
                case 2:
                    this.storeVoucher.text = `全单折扣${quickPayInfo.discountRatio}%`
                    discountAmount = decimal.mul(amount, decimal.sub(1, parseFloat(parseFloat(quickPayInfo.discountRatio) / 100)))
                    discountAmount = this.MathFloor(discountAmount).toFixed(2)
                    break;
                case 3:
                    quickPayInfo.discountAmount = this.MathFloor(quickPayInfo.discountAmount).toFixed(2)
                    this.storeVoucher.text = `满${quickPayInfo.minSalesOrderAmountOfDiscount}减${quickPayInfo.discountAmount} 最多减${quickPayInfo.maxDiscountAmount}`
                    let times = parseInt(decimal.div(amount, quickPayInfo.minSalesOrderAmountOfDiscount));
                    discountAmount = decimal.mul(quickPayInfo.discountAmount, times);
                    discountAmount = discountAmount.toFixed(2)
                    if (discountAmount > quickPayInfo.maxDiscountAmount) {
                        discountAmount = quickPayInfo.maxDiscountAmount;
                    }
                    break;
                case 4:
                    quickPayInfo.discountAmount = this.MathFloor(quickPayInfo.discountAmount).toFixed(2)
                    this.storeVoucher.text = `每满${quickPayInfo.minSalesOrderAmountOfDiscount}减${quickPayInfo.discountAmount}-无上限`
                    let multiple = parseInt(decimal.div(amount, quickPayInfo.minSalesOrderAmountOfDiscount));
                    discountAmount = decimal.mul(quickPayInfo.discountAmount, multiple);
                    discountAmount = discountAmount.toFixed(2)
                    break;
                default:
                    break;

            }

            this.storeVoucher.discountAmount = discountAmount
            this.actulAmount = parseFloat(decimal.sub(parseFloat(this.amount), parseFloat(discountAmount)))

        },
        //下单并且支付
        toPay () {
            this.isClickPay = true;
            this.requestParam.storeUID = this.salesOutletInfo.storeUID
            this.requestParam.salesOutletUID = this.salesOutletInfo.salesOutletUID
            this.requestParam.amount = this.actulAmount.toFixed(2) //实际付款金额
            this.requestParam.noDiscountPrice = this.discountAmount
            this.requestParam.totalPrice = parseFloat(this.amount).toFixed(2) //应付付款的金额
            this.requestParam.remark = '游客支付'
            this.requestParam.clientSource = 1
            // console.log(this.requestParam)
            //生产订单
            this.$http.post("/api/addTourist", this.requestParam).then((res) => {
                if (parseInt(res.body.isSuccess) === 1) {
                    this.isClickPay = false;
                    this.orderId = res.body.resData.salesOrderCode || ''
                    //支付参数
                    let params = {}
                    const host = window.location.href.split("#")[0];
                    params.merchantType = this.merchantType || 1;
                    params.paymentType = this.paymentInfo.paymentType;
                    params.salesOrderCode = this.orderId;
                    params.remark = '游客快捷支付下单';
                    let storeInfo = `salesOrderCode=${params.salesOrderCode}&amount=${this.requestParam.amount}&storeName=${this.salesOutletInfo.salesOutletName}&pay=${this.paymentName}&businessCategoryName=${this.businessCategoryName}`
                    params.returnUrl = `${host}#/touristPayResult?${storeInfo}`;
                    params.clientIP = this.clientIP;
                    params.wapUrl = host;
                    // console.log('params:',params)
                    if (this.paymentInfo.paymentType === undefined || this.paymentInfo.paymentMethod === undefined) {
                        this.$layer.toast({
                            icon: "icon-check",
                            content: "请选择支付方式！",
                            time: 1500
                        });
                        return false;
                    }
                    //console.log('this.paymentName',this.paymentInfo.paymentType)
                    this.$http.post("/api/touristPayPlat", params).then((rpn) => {
                        // console.log('rpn',rpn)
                        //发起支付
                        //const ua = navigator.userAgent.toLowerCase();
                        //微信打开，选中微信支付
                        if (this.paymentInfo.paymentType === 5) {
                            let form = rpn.data.resData.aliHtml;
                            let app = document.getElementById("app");
                            let node = this.parseDom(form);
                            app.appendChild(node[0]);
                            document.forms["alipaysubmit"].submit();
                        } else {
                            let link = res.data.resData.linkUrl;
                            window.location.href = link;
                        }
                        // if (ua.indexOf("micromessenger") > 0) {
                        //     if (this.paymentName.indexOf('微信')>=0) {
                        //         let link = res.data.resData.linkUrl;
                        //         window.location.href = link;
                        //     }
                        // }else if (ua.indexOf("alipay") > 0) {//支付宝打开，选中支付宝
                        //     if (this.paymentName.indexOf('支付宝')>=0) {
                        //         let form = rpn.data.resData.aliHtml;
                        //         let app = document.getElementById("app");
                        //         let node = this.parseDom(form);
                        //         app.appendChild(node[0]);
                        //         document.forms["alipaysubmit"].submit();
                        //     }
                        // }
                        return false
                    })
                } else {
                    this.alert('下单失败' + res.body.description);
                }
            })
        }
    }
}

</script>
<style scoped>
.pay-bg {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
}
.pay-bottom {
  position: fixed;
  bottom: 0;
  height: 50vh;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  z-index: 11;
}
.pay-bottom button {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #09bebf;
  border: none;
  color: #fff;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.42rem;
}
.pay-bottom button:active {
  background: #20b4b4;
}
.pay-bottom .title {
  text-align: center;
  border-bottom: #dcdcdc solid 1px;
  font-size: 0.42rem;
  line-height: 3;
  margin: 0 0.1rem;
  position: relative;
}
.pay-bottom .title i {
  width: 0.6rem;
  height: 0.6rem;
  display: inline-block;
  background: url('../assets/images/logo-yjg.png');
  background-size: 100% 100%;
  vertical-align: middle;
  margin-top: -0.08rem;
  margin-right: 0.1rem;
}
.pay-bottom .title span {
  width: 1.2rem;
  height: 1.2rem;
  background: #ddd;
  position: absolute;
  left: 0;
  top: 0;
  background: url('../assets/images/vp-04.png') 20% 50% no-repeat;
  background-size: 36% 36%;
}
.pay-bottom .pricev {
  text-align: center;
  font-size: 0.68rem;
  line-height: 2.2;
}

.pay-bottom.pay-list {
  height: 40vh;
}
.pay-bottom.pay-list .text p {
  padding: 0.3rem 0;
  font-size: 0.5rem;
}
.pay-bottom .text span.icon-a {
  float: none;
  width: 0.8rem;
  height: 0.8rem;
  display: inline-block;
  vertical-align: middle;
  background: url('../assets/images/vp-06.png');
  background-size: 100% 100%;
  margin-top: -0.04rem;
  margin-right: 0.08rem;
}
.pay-bottom .text span.icon-b {
  float: none;
  width: 0.8rem;
  height: 0.8rem;
  display: inline-block;
  vertical-align: middle;
  background: url('../assets/images/vp-07.png');
  background-size: 100% 100%;
  margin-top: -0.04rem;
  margin-right: 0.08rem;
}

.pay-bottom .text {
  margin: 0 0.2rem;
  color: #333;
}
.pay-bottom .text p {
  line-height: 0.8rem;
  border-bottom: #dcdcdc solid 1px;
  font-size: 0.38rem;
  position: relative;
}
.pay-bottom .text span {
  float: right;
  font-size: 0.38rem;
}
.pay-bottom .text span.red {
  color: #ff0000;
}
.pay-bottom .text p.pay {
  padding-right: 0.5rem;
}
.pay-bottom .text p i {
  height: 0.8rem;
  width: 0.8rem;
  display: inline-block;
  background: url('../assets/images/vp-03.png') 185% 150% no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 0;
}
.pay-bottom.pay-list .text p i {
  height: 0.8rem;
  width: 0.8rem;
  display: inline-block;
  background: url('../assets/images/vp-09.png') center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 0;
}

.g-emall_wrap {
  background: #f2f2f2;
  height: 100vh;
}
.g-emall_wrap.white {
  background: #fff;
  height: 100vh;
}
header h2 {
  background: #09bebf;
  text-align: center;
  color: #fff;
  height: 1rem;
  font-size: 0.42rem;
  line-height: 1rem;
  font-weight: 100;
}
.go-back {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  background: url('../assets/images/vp-08.png') center no-repeat;
  background-size: 80%;
}
.vis-img {
  padding: 1rem 0 0.2rem 0;
  text-align: center;
}
.vis-img img {
  width: 3rem;
  height: 3rem;
}
.vis-title {
  text-align: center;
  font-size: 0.36rem;
  color: #333;
  line-height: 2.4;
}
.vis-title span {
  color: #cc0000;
}

.vis-info {
  padding: 0 0.1rem;
  margin-top: 1.2rem;
}
.vis-info .input {
  border-bottom: #ddd solid 1px;
  font-size: 0.32rem;
  padding: 0.2rem 0;
}
.vis-info button {
  background: #6bd8d9;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border: none;
  color: #fff;
  font-size: 0.38rem;
  margin-top: 0.6rem;
  border-radius: 0.06rem;
}
.vis-info button:active {
  background: #20b4b4;
}
.vis-info .msg {
  text-align: center;
  font-size: 0.32rem;
  color: #999;
  line-height: 3;
}
.vis-info .name {
  display: inline-block;
  width: 3.2rem;
  text-align: right;
  font-size: 0.36rem;
  color: #333;
  padding-right: 0.2rem;
}
.vis-info input {
  font-size: 0.36rem;
}

/* .vis-bottom{position: fixed;bottom: .4rem;text-align: center;width: 100%;display:flex;justify-content: space-around;}
.vis-bottom span{display: inline-block;background: #ff9966;color: #fff;padding: .2rem .4rem;line-height: 1;font-size: .36rem} */
.visc2-bottom {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}
.visc2-bottom span {
  display: inline-block;
  background: #ff9966;
  color: #fff;
  padding: 0.2rem 0.4rem;
  line-height: 1;
  font-size: 0.36rem;
}
/*新加*/
.downloadTop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.2rem;
  background: rgba(0, 0, 0, 0.4);
  font-size: 0.4rem;
  line-height: 1.2rem;
  color: #333;
}
.downloadTop .close {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  background: url('../assets/images/close.png') center no-repeat;
  background-size: 60% 60%;
  float: left;
}
.downloadTop .icon {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  background: url('../assets/images/logo-yjg.png') center no-repeat;
  background-size: 70% 70%;
  float: left;
}
.downloadTop .click {
  background-color: rgba(9, 190, 191, 1);
  font-size: 0.3rem;
  color: #fff;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.4rem;
  border-radius: 0.2rem;
  float: right;
  margin: 0.2rem 0.2rem 0 0;
}
.vis-info button.success {
  background: #20b4b4;
}
.download_app {
  position: fixed;
  width: 100%;
  height: 1.08rem;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 1;
  transition: all 0.3s linear;
}
.download_app_state {
  opacity: 0;
  z-index: -1;
}
.download_app .mask {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
}
.download_app .download_tips {
  padding: 0.2rem 0.24rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}
.download_app .download_tips .close {
  float: left;
  width: 0.64rem;
  height: 0.64rem;
  background: url('../assets/images/close.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 2px;
}
.download_app .download_tips .tips {
  float: left;
  margin-left: 0.36rem;
}
.download_tips .tips {
  font-size: 0.2rem;
  line-height: 1.2;
}
.download_tips .tips p {
  color: #fff;
  font-size: 0.2933rem;
  margin: 0;
  padding: 0;
}
.download_tips .tips span {
  color: #cccccc;
  font-size: 0.24rem;
  padding: 0;
}
.download {
  float: right;
  width: 2.08rem;
  height: 0.64rem;
  background: #00c2c0;
  border-radius: 0.32rem;
  color: #fff;
  margin-top: 2px;
  font-size: 0.32rem;
  border: none;
}
.logo {
  position: absolute;
  width: 100%;
  height: 7.64rem;
  background: url('../assets/images/logo.png') no-repeat;
  background-size: 100% 100%;
}
.inviter {
  width: 3.28rem;
  height: 1.4rem;
  border: 2px solid #28c6c4;
  border-radius: 0.16rem;
  background: #fff;
  margin: 5.36rem auto 0;
  text-align: center;
  line-height: 0.56rem;
  font-size: 0.4rem;
}
.inviter p {
  color: #595757;
  margin-top: 0.16rem;
}
.inviter span {
  color: #00c2c0;
}

/*修改*/
.vis-bottom {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}
.vis-info .input {
  border-bottom: #ddd solid 1px;
  font-size: 0.32rem;
  padding: 0.1rem 0;
}
.vis-info .name {
  display: inline-block;
  width: 3.2rem;
  text-align: right;
  font-size: 0.36rem;
  color: #333;
  padding-right: 0.2rem;
  line-height: 1rem;
}
.vis-info input {
  font-size: 0.36rem;
  line-height: 1rem;
}
.display-none {
  display: none;
}
.download_app_state {
  opacity: 0;
  z-index: -1;
}
</style>

